/// Specifies the width x height for the circle
$dataset-compliance-step-circle-size: 30px;
/// Specifies the base color for the step indicator
$dataset-compliance-step-color-base: set-color(grey, mid);
/// Specifies the completion color for the step indicator
$dataset-compliance-step-color-complete: set-color(blue, blue5);

/// Defines rules for the dataset compliance step indicator
/// A circle containing the step number, with a separating dash between successive steps
.dataset-compliance-step {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-weight: fw(normal, 4);
  height: $dataset-compliance-step-circle-size;
  width: $dataset-compliance-step-circle-size;
  color: $dataset-compliance-step-color-base;
  background-color: set-color(white, base);
  border: 2px solid $dataset-compliance-step-color-base;
  border-radius: 50%;

  &--complete {
    color: transparent;
    border-color: $dataset-compliance-step-color-complete;

    &::after {
      content: '\f00c';
      font-family: $font-awesome-stack;
      color: $dataset-compliance-step-color-complete;
      margin-left: -5px;
    }
  }

  & + & {
    margin-left: item-spacing(5);
    overflow: visible;

    &::before {
      content: "";
      width: 16px;
      margin-left: -28px;
      border: 1px solid $dataset-compliance-step-color-base;
      position: absolute;
    }
  }
}

/// Sets the styles for a wrapping container
.dataset-compliance-step-container {
  margin: item-spacing(4) 0;
}
